<template>
    <up-popup 
        :title="propsRef.title"
        :bgColor="propsRef.bgColor"
        :overlayOpacity="propsRef.overlayOpacity"
        :round="propsRef.round"
        :mode="propsRef.mode"
        :show="propsRef.show"
        :overlay="propsRef.overlay"
        :duration="propsRef.duration"
        :overlayDuration="propsRef.overlayDuration"
        :overlayStyle="propsRef.overlayStyle"
        :closeOnClickOverlay="propsRef.closeOnClickOverlay"
        :zIndex="propsRef.zIndex"
        :safeAreaInsetBottom="propsRef.safeAreaInsetBottom"
        :zoom="propsRef.zoom"
        :customStyle="customStyle" 
        :closeable="false" 
        :safeAreaInsetTop="propsRef.mode == 'right' || propsRef.mode == 'left' || propsRef.safeAreaInsetTop"
        @open="emits('open', $event)"
        @close="emits('close', $event)"
    >
        <view class="lrl-popup-wrapper" :class="{'lrl-popup-wrapper--cover': propsRef.mode == 'right' || propsRef.mode == 'left' }">
            <view class="lrl-popup-wrapper-header">
                <image class="lrl-popup-wrapper-header-titleimg" 
                    v-if="showTipsImg"
                    :src="$assetsurl('/images/shop/lrl-popup-bgicon.png')"></image>
                <slot name="title" >
                    <view class="lrl-popup-wrapper-header-content">
                        <text class="lrl-popup-wrapper-header-content-text">{{ title || '' }}</text>
                    </view>
                </slot>
                <view
                	v-if="propsRef.closeable"
                	@tap.stop="emits('close')"
                	class="lrl-popup-wrapper-header__close"
                	hover-class="lrl-popup-wrapper-header__close--hover"
                	hover-stay-time="150"
                >
                	<u-icon
                		name="close"
                		color="#909399"
                		size="18"
                		bold
                	></u-icon>
                </view>
            </view>
            <scroll-view class="lrl-popup-wrapper-content" :scroll-y="true" :style="[{ height: contentHeight }]">
                <slot>
                    <view class="lrl-popup-wrapper-content-html" v-if="propsRef.parseContent" v-html="parseConentHtml"></view>
                    <view class="lrl-popup-wrapper-content-html" v-else >
                        {{ propsRef.content }}
                    </view>
                </slot>
            </scroll-view>
            <view class="lrl-popup-wrapper-foolter" v-if="$slots.foolter">
                <slot name="foolter">
                    
                </slot>
            </view>
        </view>
    </up-popup>
</template>

<script setup>
    import { computed } from 'vue';
    import { props } from '@/uni_modules/uview-plus/components/u-popup/props.js'
    /**
     * lrl-popup-wrapper 统一风格弹出框，集成 modelShow 弹框功能
     * @description LrlPopupWrapper 统一风格弹出框，其他属性同up-popup
     * @author ruilin
     * @tutorial https://ijry.github.io/uview-plus/components/popup.html
     * @property {String}			title				标题
     * @property {Boolean}			show				是否展示弹窗 (默认 false )
     * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
     * @property {String}			mode				弹出方向（默认 'bottom' ）
     * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
     * @property {String | Number}	overlayDuration		遮罩层动画时长，单位ms （默认 350 ）
     * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
     * @property {Object | String}	overlayStyle		自定义遮罩的样式
     * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
     * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
     * @property {String | Number}	zIndex				层级 （默认 10075 ）
     * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
     * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
     * @property {String | Number}	round				圆角值（默认 0）
     * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
     * @property {Object}			customStyle			组件的样式，对象形式
     * @property {String}			contentHeight		内容区域高度，设定高度可让内容超出滚动 （默认auto）
     * 
     * @property {Boolean}			showTipsImg			是否显示顶部提示图标(默认false)
     * @property {String}			content			    内容
     * @property {Boolean}			parseContent		是否转义内容，内置class标签可以自定义样式
     * @event {Function} open 弹出层打开
     * @event {Function} close 弹出层收起
     * @example <lrl-popup-wrapper></lrl-popup-wrapper>
     */
    const propsRef = defineProps(
        Object.assign(props, {
            title: {
                type: [String, Number],
                default: ''
            },
            bgColor: {
                type: String,
                default: 'linear-gradient(0deg, #FFFFFF 82%, #FFC6CB 100%)'
            },
            overlayOpacity: {
                type: [String, Number],
                default: 0.6
            },
            round: {
                type: [String, Number],
                default: '40rpx'
            },
            closeable: {
                type: Boolean,
                default: true
            },
            showTipsImg: {
                type: Boolean,
                default: false
            },
            parseContent: {
                type: Boolean,
                default: false
            },
            content: {
                type: [String,Number],
                default: ""
            },
            contentHeight: {
                type: [String,Number],
                default: "auto"
            },
            mode: {
                type: String,
                default: 'bottom'
            },
            customStyle: {
                type: [Object, String],
                default: ''
            }
        })
    )
    
    const emits = defineEmits([
        'close',
        'open'
    ])
    const customStyle = computed(() => {
        if(propsRef.customStyle){
            return propsRef.customStyle
        }else if(propsRef.mode == 'right' || propsRef.mode == 'left'){
            return 'display: flex;flex-direction: column;'
        }
    })
    
    
    const parseConentHtml = computed(() => propsRef.content)
    // const parseConentHtml = computed(() => autoDetectReplace(propsRef.content))
    
    // function autoDetectReplace(html, targetTag = 'text') {
    //   // 同时匹配开始标签和结束标签的正则表达式
    //   return html.replace(/<(\/?)([\w-]+)([^>]*)>/g, (match, isCloseTag, tagName, attrs) => {
    //     // 检测标签名是否符合样式类标签特征（可根据需求调整规则）
    //     if (/(^font-color-|^style-)/.test(tagName)) {
    //       const newTag = isCloseTag ? `</${ targetTag }>` : 
    //         `<${ targetTag } class="lrl-popup-wrapper-content-html--${tagName}"${attrs}>`;
    //       // const newTag = isCloseTag ? `</${ targetTag }>` : 
    //       //   `<${ targetTag } style="color: ${tagName};"${attrs}>`;
    //       return newTag;
    //     }
    //     return match; // 非目标标签保持原样
    //   });
    // }
</script>

<style scoped lang="scss">
    ::v-deep .u-popup__content__close--top-right{
        top: 45rpx;
        right: 31rpx;
    }
    .lrl-popup-wrapper{
        
        &--cover{
            flex: 1;
            height: 0;
            display: flex;
            flex-direction: column;
            
            .lrl-popup-wrapper-content{
                flex: 1;
                height: 0;
            }
        }
        
        
    
        &-header{
			/* #ifdef APP-NVUE */
			align-items: center;
			/* #endif */
            position: relative;
            margin-top: 20rpx;
            padding: 26rpx;
            margin-bottom: 24rpx;
            
            .lrl-popup-wrapper-header-titleimg{
				/* #ifndef APP-NVUE */
                display: block;
				margin-left: auto;
				margin-right: auto;
				/* #endif */
				margin-top: -111rpx;
				margin-bottom: 16rpx;
                width: 247rpx;
                height: 181rpx; 
            }
            
            .lrl-popup-wrapper-header-content{
                text-align: center;
                
				.lrl-popup-wrapper-header-content-text{
					text-align: center;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
				}
            }
            
            &__close {
            	position: absolute;
                right: 20rpx;
                top: 10rpx;
                
            	&--hover {
            		opacity: 0.4;
            	}
            }
        }
        
        .lrl-popup-wrapper-content{
            // margin-bottom: 37rpx;
            padding: 0 30rpx 37rpx 30rpx;
            
            .lrl-popup-wrapper-content-html{
                width: 477rpx;
                margin: 0 23rpx;
                text-align: center;
                
				/* #ifndef APP-NVUE */
				::v-deep {
                    view,
                    text,
                    div
                    span,
                    p{
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                        line-height: 40rpx;
                    }

                    // 以下为自定义标签
                    & font-style-1 {
                        color: #FF364E !important;
                    }
                }
				/* #endif */
                
            }
        }
        
        .lrl-popup-wrapper-foolter{
			/* #ifndef APP-NVUE */
            min-height: 171rpx;
			/* #endif */
            padding: 0 30rpx 20rpx 30rpx;
        }
    }
</style>